<template>
    <div>
        <a-drawer
            width="500"
            placement="right"
            :closable="false"
            :visible="visible"
            :after-visible-change="afterVisibleChange"
            @close="onClose"
        >
            <a-descriptions title="任务详情" :column="column">
                <a-descriptions-item label="任务名称">
                    【{{ taskDetail.type }}】{{ taskDetail.title }}
                </a-descriptions-item>
                <a-descriptions-item label="项目渠道">
                    {{ taskDetail.channel_name }} | {{ taskDetail.project_name }}
                </a-descriptions-item>
                <a-descriptions-item label="操作日期">
                    {{ taskDetail.date }}【{{ taskDetail.week }}】
                </a-descriptions-item>
                <a-descriptions-item label="操作时间">
                    {{ taskDetail.time }}
                </a-descriptions-item>
                <a-descriptions-item label="版本">
                    {{ taskDetail.version }}
                </a-descriptions-item>
                <a-descriptions-item label="执行人">
                    {{ taskDetail.owner }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions layout="vertical">
                <a-descriptions-item label="内容详情">
                    <pre>{{ taskDetail.content }}</pre>
                </a-descriptions-item>
            </a-descriptions>
        </a-drawer>
        <exec-form ref="execForm" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            column: {
                xs: 1,
                sm: 1,
                md: 1,
            },
            visible: false,
            data: [],
            loading: false,
            taskDetail: {},
        }
    },
    methods: {
        open(record) {
            this.visible = true
            this.loading = true
            this.taskDetail = record
        },
        afterVisibleChange(val) {},
        onClose() {
            this.visible = false
        },
    },
}
</script>

<style scoped>
pre {
    white-space: pre-wrap; /*css-3*/
    white-space: -moz-pre-wrap; /*Mozilla,since1999*/
    white-space: -pre-wrap; /*Opera4-6*/
    white-space: -o-pre-wrap; /*Opera7*/
    word-wrap: break-word; /*InternetExplorer5.5+*/
}
</style>